<template>
  <div class="app-container">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" label-width="130px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="姓名">
              <el-input v-model="params.username" placeholder="请输入用户姓名" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="手机号">
              <el-input v-model="params.userpone" placeholder="请输入用户手机号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="银行卡号">
              <el-input v-model="params.cardNo" placeholder="请输入银行卡号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button style="margin-left:60px" type="primary" @click="search()">查询</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- table -->
    <div v-loading="tableLoading" class="table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          type="index"
          label="序号"
          fixed="left"
          align="center"
          :index="table_index"
          width="50"
        />
        <el-table-column prop="account_name" align="center" label="姓名" />
        <el-table-column prop="mobile" align="center" label="手机号">
          <template slot-scope="scope">{{ scope.row.mobile | phonereg }}</template>
        </el-table-column>
        <el-table-column prop="bank_name" align="center" label="开户行" />
        <el-table-column prop="account_no" align="center" label="银行卡号" />
        <el-table-column prop="created_at" align="center" label="添加时间" />
      </el-table>
    </div>
    <div class="pagesCon">
      <div>
        <el-pagination
          :current-page="params.page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
// import  from "@/api/ /";
import { parnerList } from '@/api/couponList'
export default {
  data() {
    return {
      params: { page: 1, pageSize: 10, userpone: '', username: '', cardNo: '' },
      tableData: [],
      datas: { freezeRemark: '' },
      total: 0,
      // tableLoading
      tableLoading: false
    }
  },
  mounted() {
    this.getList(this.params)
  },
  methods: {
    search() {
      this.params.pageNum = 1
      this.getList(this.params)
    },
    async getList(opt) {
      this.tableLoading = true
      const res = await parnerList(opt)
      if (res.data.code == 200) {
        this.tableLoading = false
        this.tableData = res.data.data.data
        this.total = res.data.data.total
      } else {
        this.$message({
          message: res.data.msg,
          type: 'warning'
        })
      }
    },

    table_index(index) {
      return (this.params.page - 1) * this.params.pageSize + index + 1
    },
    handleSizeChange(val) {
      this.params.page = 1
      this.params.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.params.pageNum = val
      this.getList()
    }
  }
}
</script>
<style scoped>
/* 分页 */
.pagesCon {
  height: 40px;
  margin-top: 20px;
}
.pagesCon > div {
  float: right;
}
</style>
